[レポート] ng-kyoto Angular Meetup #9 に参加してきました #ng_kyoto #angular

どうも！大阪オフィスの西村祐二です。

2019/1/18（金）に開催されました「ng-kyoto Angular Meetup #9」に参加してきましたので、レポートにまとめたいと思います。

ng-kyotoとは

javascriptのフレームワークであるAngularのコミュニティの一つになります。

また、コミュニティのWebサイトもあります。Angularで作られてます。

https://ng-kyoto.angular.jp/

サイトでは下記のように説明されています。

ng-kyotoはAngularをテーマに京都で活動を行っているユーザーコミュニティです。

日本の古都、京都から最先端のWeb技術を学び、発信していきます。

古都の空気に触れながら、Angularの未来を一緒に学びませんか？

Angularって聞くと「なんぎやな、ややこしな」と思わはるかもしれませんけど、

周りと一緒に勉強したら意外ととっつきやすいんですよ。

開催場所

サイボウズさんの大阪オフィス（大阪府大阪市北区角田町8番1号 梅田阪急ビルオフィスタワー 35階）で開催されました。

駅近でアクセスもよく、オフィスの内装もめちゃんこキレイでした。

実際に発表が行われた会議室もゲストwifiの提供あり、テーブルあり、電源ありで充実した設備でとても快適でした。

また、今回リモート登壇という形の発表スタイルがあったのですが、音声が聞こえにくいということもなくスピーカー等の音響機器も素晴らしかったです。（羨ましい）

発表1：Canvasでスクロールを扱う際の座標計算と苦労 @okunokentaro

音楽制作ソフトでよくあるピアノロールをReact HooksとCanvasを使ってWebアプリケーションとして作成したという内容の発表でした。

今回、リモート登壇というスタイルでの発表でしたが、特に問題なく発表をきくことができました。この方法が普及すれば、発表者側は移動の負担軽減、交通費のコスト削減が期待され、聴講者としては場所に関係なく地方にいながら東京のスーパーエンジニアの話をきくことがきるようになるのではないでしょうか。

ピアノロールの画像、wikipediaより引用

発表で出てきたReact HooksはReact Conf 2018で発表された新機能で現在プレビューとなっているようです。React Hooksについては下記を参照ください。

https://reactjs.org/docs/hooks-intro.html

音楽制作ソフトではピアノロール上をマウス操作で譜面を作成でき、拡大縮小、スクロールなども当たり前にできます。

これら機能をWebアプリケーションにするためにcanvasを使って実現したという話だったのですが、マウス操作、スクロール機能の実装には座標計算を泥臭く実装する必要があるなどインタラクティブなWebアプリケーションを作るとなるとかなり大変だということがとても伝わってきました。

また、Retina対応などデバイスの解像度の対応なども必要とのことでした。

Reactには詳しくないのですが、「こういうところを気をつけたほうがいい」など実際に触って得た知見が多く含まれる発表でとても参考になりました。

発表2:AWS AppSync + ApolloではじめるGraphQL @N372Drag

既存APIとGraphQLとの違いや、AWS AppSync、Apolloの特徴など簡潔にまとまっており、とてもわかりやすかったです。

実際にAWSのマネージメントコンソールからAppSyncの環境をつくり、AngularからGraphQLをつかってDynamoDBのデータを呼び出し表示するデモもあり、簡単にGraphQLを使ったアプリケーションが作れることがわかりました。

また、発表の中で紹介されていたGraphQLスキーマから定義ファイルを生成するツールのGraphQL Code Generatorはかなり便利そうだったので一度試してみたいと思います。

余談ですが、以前私もAppSyncをすこし触ったことがあり、下記のような発表をしていました。懇親会の際に私のスライドをみたことがあると伺い、改めてブログの力は偉大だなと感じました。これからもどんどんアウトプットしていこうと思います。

HIGOBASHI.AWS 第5回 応用編 実践サーバーレス「AngularとAWS AppSyncで作るサーバーレスアプリケーション」を話しました #higobashiaws

発表3:初心者だからこそのAngular @rdlabo

※スライドは公開され次第更新します。

本発表で特に印象に残っていることは、コーポレートサイトのようなWebサイトもAngularで作れるよというお話です。

AngularといえばWebアプリケーションの開発をサポートするフレームワークとしてのイメージしか持ってなかったので目からウロコでした。

実際の運用についての話もあり、AngularはTypeScriptが標準でサポートされているということを活用したものでした。

具体的には、Webサイトに表示するような文字列はTypeScriptファイルに記載するようにし、それぞれに型をつけて管理していくというものでした。この方法で運用すれば更新や修正の際に、間違えて違う型のものを入れた際に、事前にきづくことができたり、ビルド時に型チェックでエラーとなり環境へのリリースを防ぐことができ、堅牢なサイトにすることができます。

特に非エンジニアの方が触ることも多いWebサイトなどにおいては有効な運用だなと思いました。

発表4:雰囲気でやっている人向けのRedux再入門 @jmblog

今までそこまで大きなアプリケーションは作ったことはなく、あるとしてもグローバル変数に状態もたせて管理するぐらいで、今後のためにngrx使っていきたいなー、でも、Redux勉強しないとなーと思っていたので、ドンピシャの発表でした。本当に参考になりました。

Reduxで出てくる用語やその役割などイラストをつかった説明でめちゃくちゃわかりやすかったです。概念はある程度理解できたので次は実際に手を動かして行きたいと思います。

さいごに

AWS系の勉強会は何度か参加したことがあるのですが、フロントエンドの勉強会ははじめて参加しました。

深い話もきけて大変有意義な勉強会でした。